<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: rgba(255, 0, 0, .5);
        }
        .right {
            float: right;
            width: 180px;
            height: 300px;
            background-color: rgba(0, 255, 0, .5);
        }
        .main {
            height: 300px;
            margin-left: 210px;
            margin-right: 190px;
            background-color: rgba(0, 0, 255, .5);
        }
    </style>
</head>
<body>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="main">
        该布局的核心思想是浮动占住左右侧，中间留下。
        一定注意要让中间这个盒子在html中最后出现。如果不写
        宽度的话中间是响应式的。
        zheliyou henduowenzide zheliyou henduowenzidezheliyou henduowenzide
        zheliyou henduowenzide zheliyou henduowenzidezheliyou henduowenzide
        zheliyou henduowenzide zheliyou henduowenzidezheliyou henduowenzide
        zheliyou henduowenzide zheliyou henduowenzidezheliyou henduowenzide
    </div>
</body>
</html>